<template>
	<view class="">
		<view class="product-box">
			<view>
				<image style="width:100px;height:100px" :src='productInfo.image' mode=""></image>
			</view>
			<view class="box-right">
				<view class="right-top">
					<view style="font-weight: 600;">{{productInfo.productName}}</view>
					<view class="price">{{productInfo.quantity==null ? 0:productInfo.quantity}}台</view>
				</view>
				<view class="desc">
					<view>产品编号：{{productInfo.productNo}}</view>
					<view>型号：{{productInfo.modelCount}}种规格</view>
					<view>库存数量：{{productInfo.quantity==null ? 0:productInfo.quantity}}</view>
				</view>
			</view>
		</view>
		<!-- tab栏 -->
		<u-tabs  class="tab" :current="index" style='margin-top: 10px;' @change="changeFn" lineWidth="104rpx" lineColor="#fd9540" :activeStyle="{ color:'#fd9540',fontWeight:'bold' }" :list="tabTitle"></u-tabs>
	     <!-- tab内容 -->
		 <view class="tab-box">
			 <view v-if="index*1===0"> 
			    <u-cell center>
					<template #title>
						<view style="font-size: 14px;">基本信息</view>
					</template>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >产品名称</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.productName}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >产品编号</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.productNo}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >产品分类</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.productType}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >型号</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.model}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >产品单位</text>
						<text class="u-cell-text" v-if="productInfo.unit==1" style="margin-left: 10px;">台</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >产品图片</text>
						<image style="width: 50px;height:50px" url="productInfo.image"></image>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >可见部门</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.visibleDeptName}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >可见人</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.visibleUserName}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >附件</text>
						<text class="u-cell-text" v-if="productInfo.enclosure" style="margin-left: 10px;">查看</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >仓库</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.warehouseName}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >库存数量</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.quantity}}</text>
					</view>
				</u-cell>
				<!-- <u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >开启库存预警</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.productName}}</text>
					</view>
				</u-cell> -->
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >创建人</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.createBy}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >创建时间</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.createTime}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >上架时间</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.putOnTime}}</text>
					</view>
				</u-cell>
				<u-cell >
					<view slot="title"  class="u-slot-title">
						<text class="u-cell-text" >下架时间</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{productInfo.putDownTime}}</text>
					</view>
				</u-cell>
			
			 </view>
			 <view v-if="index*1===1">
			  <u-cell center style="background-color: #f0f0f0;">
			  	<template #title>
			  		<view style="font-size: 14px;">选择规格</view>
			  	</template>
			  </u-cell>
			  <view class="warehouse">
			  	<view class="price">
			  		<span>成本：元</span>
			  		<span>单价：元</span>
			  	</view>
				<view style="margin: 5px 0 8px 0;">规格</view>
				<view class="modelBtn-box">
					<view class="modelBtn" v-for="(item,index) in modelList" :key="index">
						<uni-tag :text="item" @click="searchBtn(item,index)" :type="number==index ? color : ''" ></uni-tag>
					</view>
				</view>
			  </view>
			  <!-- 规格库存 -->
			  <u-cell center style="background-color: #f0f0f0;">
			  	<template #title>
			  		<view style="font-size: 14px;">规格库存</view>
			  	</template>
				<template #label>
					<view style="font-size: 12px;">总库存：{{Quantity}}台</view>
				</template>
			  </u-cell>
			  <uni-table border stripe emptyText="暂无更多数据" >
			  	<!-- 表头行 -->
			  	<uni-tr>
			  		<uni-th width="25%" align="center">仓库名称</uni-th>
			  		<uni-th width="25%" align="center">型号</uni-th>
			  		<uni-th width="25%" align="center">库存（台）</uni-th>
			  		<uni-th width="25%" align="center ">可用数量</uni-th>
			  	</uni-tr>
			  	<!-- 表格数据行 -->
			  	<uni-tr v-for="(item,index) in warehouseList" :key="index">
			  		<uni-td align="center ">{{item.warehouseName}}</uni-td>
			  		<uni-td align="center ">{{item.model}}</uni-td>
			  		<uni-td align="center ">{{item.quantity}}</uni-td>
			  		<uni-td align="center ">{{item.availableQuantity}}</uni-td>
			  	</uni-tr>
			  </uni-table>
			 </view>
			 <view v-if="index*1===2">
				 <u-cell center style="background-color: #f0f0f0;">
				 	<template #title>
				 		<view style="font-size: 14px;">选择规格</view>
				 	</template>
				 </u-cell>
				 <view class="warehouse">
				 	<view class="price">
				 		<span>成本：元</span>
				 		<span>单价：元</span>
				 	</view>
					<view style="margin: 5px 0 8px 0;">规格</view>
					<view class="modelBtn-box">
						<view class="modelBtn">
							<uni-tag text="SY-GZ360" @click="searchBtn()"  type="warning" ></uni-tag>
						</view>
						<view class="modelBtn">
							<uni-tag text="SY-GZ360"  type="warning" ></uni-tag>
						</view>
						<view class="modelBtn">
							<uni-tag text="SY-GZ360"  type="warning" ></uni-tag>
						</view>
					</view>
				 </view>
				 <!-- 合同列表 -->
				 <u-cell center style="background-color: #f0f0f0;">
				 	<template #title>
				 		<view style="font-size: 15px;font-weight: 600;">合同订单列表</view>
				 	</template>
				 </u-cell>
				 <!-- 订单详情 -->
				 <view class="order">
					 <view class="number">
					 	<view>ZLDD202211033001</view>
					 	<view style="color: #fd9540;">3000.00元</view>
					 </view>
					 <view class="text">签订日期：2022-11-03</view>
					 <view class="text">数量：8</view>
				 </view>
			 </view>
			  <view v-if="index*1===3"> 
			    <u-cell center style="background-color: #f0f0f0;">
			    	<template #title>
			    		<view style="font-size: 14px;">选择规格</view>
			    	</template>
			    </u-cell>
			    <view class="warehouse">
			    	<view class="price">
			    		<span>成本：元</span>
			    		<span>单价：元</span>
			    	</view>
					<view style="margin: 5px 0 8px 0;">规格</view>
					<view class="modelBtn-box">
						<view class="modelBtn">
							<uni-tag text="SY-GZ360"  type="warning" ></uni-tag>
						</view>
						<view class="modelBtn">
							<uni-tag text="SY-GZ360"  type="warning" ></uni-tag>
						</view>
						<view class="modelBtn">
							<uni-tag text="SY-GZ360"  type="warning" ></uni-tag>
						</view>
					</view>
			    </view>
				
				<u-cell center style="background-color: #f0f0f0;">
					<template #title>
						<view style="font-size: 15px;font-weight: 600;">入库记录</view>
					</template>
				</u-cell>
				<!-- 订单详情 -->
				<view class="order">
					 <view class="number">
						<view>ZLDD202211033001</view>
					 </view>
					 <view class="text">签订日期：2022-11-03</view>
					 <view class="text">仓库：南宁仓</view>
					 <view style="display: flex; justify-content: space-between;">
						<view class="text">数量：2</view>
						<view class="text" style="color: #fd9540;">销售退货入库</view>
					 </view>
				</view>
			 </view>
			 <view v-if="index*1===4">
				 <!-- 出库记录 -->
				 <u-cell center style="background-color: #f0f0f0;">
				 	<template #title>
				 		<view style="font-size: 14px;">选择规格</view>
				 	</template>
				 </u-cell>
				 <view class="warehouse">
				 	<view class="price">
				 		<span>成本：元</span>
				 		<span>单价：元</span>
				 	</view>
				 	<view style="margin: 5px 0 8px 0;">规格</view>
				 	<view class="modelBtn-box">
				 		<view class="modelBtn">
				 			<uni-tag text="SY-GZ360"  type="warning" ></uni-tag>
				 		</view>
				 		<view class="modelBtn">
				 			<uni-tag text="SY-GZ360"  type="warning" ></uni-tag>
				 		</view>
				 		<view class="modelBtn">
				 			<uni-tag text="SY-GZ360"  type="warning" ></uni-tag>
				 		</view>
				 	</view>
				 </view>
				 
				 <u-cell center style="background-color: #f0f0f0;">
				 	<template #title>
				 		<view style="font-size: 15px;font-weight: 600;">入库记录</view>
				 	</template>
				 </u-cell>
				 <!-- 订单详情 -->
				 <view class="order">
				 	 <view class="number">
				 		<view>ZLDD202211033001</view>
				 	 </view>
				 	 <view class="text">签订日期：2022-11-03</view>
				 	 <view class="text">仓库：南宁仓</view>
				 	 <view style="display: flex; justify-content: space-between;">
				 		<view class="text">数量：2</view>
				 		<view class="text" style="color: #fd9540;">销售出库</view>
				 	 </view>
				 </view>
			 </view>
			 <view v-if="index*1===5">
				 <!-- 租赁回货申请单 -->
				 <view class="application ">
					 <view class="top">ZXLHH20220518008</view>
					 <view class="text">1种商品 共5件</view>
					 <view class="text">负责人:尹成文</view>
				 </view>
			 </view>
			 <view v-if="index*1===6">
				<view style="padding: 10px;"> 
					<view style="font-size: 16px;font-weight: 600;color:#fd9540">产品介绍</view>
					<view style="padding: 10px;">{{text}}</view>
				</view>
			 </view>
		 </view>
	</view>
</template>

<script>
	import {listProduct} from "@/api/product/product.js"
	import {listStock} from'@/api/stock.js'
	export default{
		data(){
			return{
				
				index:0,
				number:0,//控制仓库型号
				tabTitle:[
					{name: '产品详情'},
					{name: '仓库/库存'},
					{name: '租赁销售订单'},
					{name: '入库记录'},
					{name: '出库记录'},
					{name: '租赁销售回货申请单'},
					{name: '产品简介'},
				],
				productInfo:{},//产品信息
				text:'',
				warehouseList:[],//仓库库存
				modelList:[],//型号集合
				color:'',
				Quantity:0,//库存总数量
			}
		},
		onLoad(e){
			// console.log(JSON.parse(decodeURIComponent(e.item)));
			this.productInfo=JSON.parse(decodeURIComponent(e.item))
			this.stockList()
		},
		methods:{
			
			// 切换tab栏
			changeFn(e){
				console.log(e);
				this.index=e.index
				if(e.index==1){
				  this.color=''	
				}
				if(e.index==2){
				  this.color=''			
				}
				if(e.index==6){
					this.text=this.productInfo.introduce
				}
			},
			// 库存
		   async stockList(){
				const res=await listStock({
					pageNum:1,
					pageSize:10000,
				})
				// console.log(res);
				res.rows.forEach((val,index)=>{
						if(this.productInfo.productNo==val.productNo){
							// console.log(val.stockQuantityList);
							this.warehouseList.push(val.stockQuantityList)
							this.modelList.push(val.model)
						}
				})
				// console.log(this.warehouseList);
				// console.log(this.modelList);
				let arr=[]
				let quantity=[]//规格库存  总库存
				this.warehouseList.forEach((item,index)=>{
					item.forEach((val,idx)=>{
					    arr.push(val)
						quantity.push(val.quantity)
					})
				})
				// console.log(arr);
				this.warehouseList=arr
				// this.Quantity=quantity.reduce(function(prev, cur, index, ) {
				//     return prev + cur;
				// },0)
				this.Quantity=this.reduceFn(quantity)
				// console.log(this.Quantity);
				
			},
			reduceFn(arr){
				
				 return arr.reduce(function(prev, cur, index, ) {
				    return prev + cur;
				},0)
			},
		   async searchBtn(item,index){
			   // 目前筛选的是仓库的  点击型号筛选
				this.number=index
				this.color='warning'
				// // 根据产品编号 ，型号搜索
				const res=await listStock({
					pageSize:1,
					pageNum:1000,
					productName:item
				})
				// console.log(res); 获取的是型号相同的  接着筛选出产品编号一样的
				res.rows.forEach((val)=>{
					val.stockQuantityList.forEach((item)=>{
						if(item.productNo==this.productInfo.productNo){
							this.warehouseList=[]
							this.warehouseList.push(item)
						}
					})
				})
				// 筛选台数
				let quantity=[]
				this.warehouseList.forEach((val)=>{
					quantity.push(val.quantity)
				})
				this.Quantity=this.reduceFn(quantity)
			}
			
		}
	}
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.product-box{
		display: flex;
		background-color: #fff;
		padding: 10px ;
		margin-top: 5px;
		.box-right{
			margin-left: 10px;
			flex:1;
			.right-top{
				display: flex;
				justify-content: space-between;
				font-size: 15px;
					
				.price{
					color: #fd9540;
				}
			}
			.desc{
				font-size: 12px;
				color: #9a9a9a;
				view{
					padding-top: 8px;
				}
			}
		}
		
	}
	// tab栏
	.tab{
		background-color: #fff;
	}
	.tab-box{
		background-color: #fff;
		
	}
	.warehouse{
		padding: 10px 10px 15px 10px;
		.price{
			span{
				display: inline-block;
				width:50%;
				
			}
		}
		.modelBtn-box{
			display: flex;
			.modelBtn{
				padding: 2px 5px;
			}
		}
	}
	// 租赁订单的合同列表
	.order{
		padding: 10px;
		.number{
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			font-weight: 500;
		}
		.text{
			font-size: 12px;
		}
	}
	// 租赁申请单
	.application{
		padding: 12px;
		border: solid 1px #eee;
		.top{
			font-size: 16px;
			font-weight: 600;
			color: red;
			
		}
		.text{
			font-size: 12px;
			padding: 3px;
		}
	}
	
	
</style>